<template>
  <!-- 一个.vue文件就是一个组件, 一个项目中只有一个根组件 App.vue -->
  <!-- 一个.vue文件内部一般是由三部分组成: template , script , style -->
  <!-- template 内部写标签 , 只能有一个根元素 -->
  <!-- script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里 -->
  <!-- style 内部写css样式 , 可以通过lang='xx'指定style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响 -->
  <div id="app">

      <div class="tabs">
 <list  :tabs="tabs" :currentIndex = "currentIndex" @deliverIndex = "changelist"></list>
       
       <right   :tabs = "tabs" :currentIndex = "currentIndex"></right>
      </div>      <!-- 父组件向子组件传值：父组件在子组件身上通过自定义属性传值，子组件内部通过props接受值 -->
      

       <!-- <div class="tabs">
            <div class="tabbox">
              渲染多个按钮
                <div>
                  


                </div>
                渲染多个列表
                <div>


                </div>

            </div>
       </div> -->
  </div>
</template>
        <!-- list区域 -->
        


        
<script>
//  导入本地图片


// 导入组件
  import list from "./components/list.vue"
  import right from "./components/right.vue"
   

  var pic1 = "https://img1.baidu.com/it/u=1582044829,1676920394&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665853200&t=0c652e074f50aeb65c113d8f978f4e04"
  var pic2 = "https://img1.baidu.com/it/u=2023886721,221813672&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665853200&t=cb79440bb308cf5c838654b05af71849"

  var pic3 = "https://img1.baidu.com/it/u=3515082661,293311857&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665853200&t=d4e44307f31ce78ec68f256b38d07e43"
export default {

  

    data(){
      return{
        currentIndex:0,
        tabs:[
          {
              tabName:"三文鱼",
              list:[
                {pic:pic1,name:"该机三文鱼",price:43},
                {pic:pic1,name:"该机三文鱼",price:43},
                {pic:pic1,name:"该机三文鱼",price:43}

              ]

        },
        {
          tabName:"火锅",
              list:[
                {pic:pic2,name:"好吃的肉",price:190},
                {pic:pic2,name:"该机三文鱼",price:43},
                {pic:pic2,name:"该机三文鱼",price:43}

              ]

        },
        {
          tabName:"烤肉",
              list:[
                {pic:pic3,name:"该机三文鱼",price:678},
                {pic:pic3,name:"该机三文鱼",price:43},
                {pic:pic3,name:"该机三文鱼",price:43}

              ]
        },

         

        ]
      }
    },
    components:{
      list,
      right

    },

    methods:{
      changelist(index){
        this.currentIndex = index;
      }
    }
      
}
</script>

<style lang="scss" scoped>
    .tabs{
      display: flex;
    }
</style>
